<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"
    />
    <style>
      .active {
        background: #ccc;
      }
      .box {
        display: flex;
        padding: 5px;
        margin: 5px;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <button id="btn" @click="divideGroup">点击分组</button>
      <template v-for="(item, index) in bookList">
        <template v-if="item.name">
          <ul class="box">
            <h2>{{item.name}}</h2>
            <template v-for="v in item.divideArr">
              <li>{{v.bookName}}</li>
            </template>
          </ul>
        </template>
        <template v-else>
          <ul class="box" @click="onClick(item, index)">
            <li :class="item.check ? 'active':''">{{item.bookName}}</li>
          </ul>
        </template>
      </template>
      <van-dialog
        v-model="show"
        title="分组"
        show-cancel-button
        @confirm="confirm"
      >
        <van-field
          label="文本"
          placeholder="填写分组名字"
          v-model="divideValue"
        />
      </van-dialog>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    <script src="./node_modules/vant/"></script>
    <script>
      //
      // b2 b3 分成一个组
      const brr = ['b2', 'b3']
      new Vue({
        el: '#root',
        data() {
          return {
            bookList: [
              { bookName: '书籍1', id: 1, check: false },
              { bookName: '书籍2', id: 2, check: false },
              { bookName: '书籍3', id: 3, check: false },
              { bookName: '书籍4', id: 4, check: false },
              { bookName: '书籍5', id: 5, check: false },
              { bookName: '书籍6', id: 6, check: false },
              { bookName: '书籍7', id: 7, check: false },
            ],
            divideValue: '',
            show: false,
            tabIndexArr: [],
            divideArr: [],
            copyArr: [],
          }
        },
        created() {
          // 拷贝
          this.copyArr = [...this.bookList]
        },
        // 基于状态去过滤数据（filter）
        // 要将分组和处理分组的效果，分开
        methods: {
          confirm() {
            console.log(this.divideValue, 'di')
            if (this.divideArr.length) {
              // 过滤用户没有选中的数组，只能在这个数组中，替换二维数组
              this.bookList = this.bookList.filter((v) => !v.check)
              // 生成二维数组
              this.bookList.splice(this.tabIndexArr[0], 0, {
                name: this.divideValue,
                divideArr: this.divideArr,
              })
              this.divideArr = []
              this.tabIndexArr = []
              console.log('分好组的数组:', this.bookList)
            }
          },
          // 每一个点击
          onClick(item, index) {
            // 找下标
            /*
            1. 改变状态
            2. 基于改变后的状态，做操作
            */
            // 1. 改变状态 true/false
            item.check = !item.check
            // 找分组的书籍 要给用户分组反悔的权利，
            if (item.check) {
              this.tabIndexArr.push(index)
              this.tabIndexArr = this.tabIndexArr.sort()
            } else {
              // 用户不选择的时候，可以删除下标
              this.tabIndexArr.splice(this.tabIndexArr.indexOf(index), 1)
            }
            this.divideArr = this.bookList.filter((v) => v.check)
            console.log('分组的书籍:', this.divideArr)
          },
          divideGroup() {
            this.show = true
          },
        },
      })

      // 找到下标 1 可以用js
      // bookList.splice(1, 0, brr)

      // console.log(bookList, '0------->bookList')
    </script>
    <script>
      btn.onclick = function () {}
    </script>
  </body>
</html>
